<template>
    <div class="outContainer">
        <div class="titleBox">
            <div class="titleLeft">
                <div class="title">是打开链接发射点立刻解放离开</div>
                <div class="status status1">我是状态</div>
            </div>
            <div class="titleRight" @click="close">
                <i class="el-icon-close"></i>
            </div>
        </div>
        <div class="contentBox">
            <div class="tagsBox">
                <div class="tag tagType1">状态1</div>
                <div class="tag tagType2">状态2</div>
            </div>
            
            <bpm-process-form :busi-id="busiId"
                :disabled-top="true"
                @doneTask="doneTask"
                @runTask="runTask">
                <div slot="busiButton">
                    <div  class="stepBoxOut">
                        <div class="stepBox">
                            <div class="stepBoxLeft">
                                <div class="stepIn" :class="index>(step.index-1)?'isDark':''" v-for="(item,index) in step.list" :key="index">
                                    <div class="stepLine" v-if="index!=0"></div>
                                    <div class="stepIconBox" :class="index == 0?'circle':''">
                                        <span v-if="index == 1">②</span>
                                        <span v-if="index == 2">③</span>
                                        <i v-if="index == 0" class="el-icon-check"></i>
                                    </div>
                                    <div class="stepName">{{ item }}</div>
                                </div>
                            </div>
                            <div class="stepBoxRight">查看完整审批流</div>
                        </div>
                    </div>
                </div>
            </bpm-process-form>
            <div class="listOut" v-for="(item,index) in list" :key="index">
                <div class="listTitleBox">
                    <img class="listIcon" :src="item.icon" alt="">
                    <div class="listTitle">{{ item.title }}</div>
                </div>
                <div class="listContentOut">
                    <div class="listContent" v-for="(itemIn,indexIn) in item.content" :key="indexIn">
                        <div class="listLabel">{{ itemIn.label }}</div>
                        <div class="listContentDes" :class="itemIn.isLink?'isLink':''">{{ itemIn.label }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footerBox">
            <div class="footerBtn btn1">项目变更</div>
            <div class="footerBtn btn2">租赁调息</div>
        </div>
    </div>
</template>
<script>
// import BpmProcessForm from "joys-bpm-ui/src/lib/pc/BpmProcessForm"
export default {
    // components: {
    //     BpmProcessForm
    // },
    props:{
        detail:Object,
        parentData:Object
    },
    data(){
        return {
            step:{
                list:['项目立项','项目评审','项目签约'],
                index:2
            },
            busiId:'',
            list:[
                {title:'基本信息',icon:require('../../../assets/icon/customerIcon.png'),content:[
                    {label:'客户名称：',content:'客户名称'},
                    {label:'客户编号：',content:'客户名称',isLink:true},
                    {label:'证件号码：',content:'客户名称'},
                    {label:'客户评级：',content:'客户名称',isLink:true},
                    {label:'注册地址：',content:'客户名称'},
                    {label:'主办经理：',content:'客户名称'},
                    {label:'所属部门：',content:'客户名称'},
                ]},
                {title:'立项信息',icon:require('../../../assets/icon/lixiangIcon.png'),content:[
                    {label:'项目名称：',content:'客户名称'},
                    {label:'项目编号：',content:'客户名称',isLink:true},
                    {label:'项目金额：',content:'客户名称'},
                    {label:'租赁期限：',content:'客户名称'},
                    {label:'租赁利率：',content:'客户名称'},
                    {label:'立项发起时间：',content:'客户名称'},
                ]},
                {title:'项目评审',icon:require('../../../assets/icon/pingshenIcon.png'),content:[
                    {label:'项目名称：',content:'客户名称'},
                    {label:'项目编号：',content:'客户名称',isLink:true},
                    {label:'项目金额：',content:'客户名称'},
                    {label:'租赁物类型：',content:'客户名称'},
                    {label:'租赁物账面原值总和：',content:'客户名称'},
                    {label:'租赁物账面净值总和：',content:'客户名称'},
                    {label:'报价利率：',content:'客户名称'},
                    {label:'租赁期限：',content:'客户名称'},
                    {label:'内部收益率：',content:'客户名称'},
                    {label:'总租金：',content:'客户名称'},
                    {label:'总本金：',content:'客户名称'},
                    {label:'创建日期：',content:'客户名称'},
                ]},
                {title:'合同制作',icon:require('../../../assets/icon/hetongIcon.png'),content:[
                    {label:'项目名称：',content:'客户名称'},
                    {label:'合同名称：',content:'客户名称',isLink:true},
                    {label:'合同金额：',content:'客户名称'},
                    {label:'制作时间：',content:'客户名称'},
                ]},
                {title:'租赁放款审批',icon:require('../../../assets/icon/fangkuanIcon.png'),content:[
                    {label:'客户名称：',content:'客户名称'},
                    {label:'投放名称：',content:'客户名称'},
                    {label:'放款编号：',content:'客户名称',isLink:true},
                    {label:'申请付款日期：',content:'客户名称'},
                    {label:'申请付款金额：',content:'客户名称'},
                    {label:'收款客户：',content:'客户名称'},
                    {label:'收款银行：',content:'客户名称'},
                    {label:'收款账户：',content:'客户名称'},
                    {label:'发起日期：',content:'客户名称'},
                ]},
                {title:'付款执行',icon:require('../../../assets/icon/fukuanIcon.png'),content:[
                    {label:'客户名称：',content:'客户名称'},
                    {label:'投放名称：',content:'客户名称'},
                    {label:'付款编号：',content:'客户名称',isLink:true},
                    {label:'申请付款日期：',content:'客户名称'},
                    {label:'申请付款金额：',content:'客户名称'},
                    {label:'付款状态：',content:'客户名称'},
                    {label:'发起日期：',content:'客户名称'},
                ]},
            ]
        }
    },
    mounted(){
        
    },
    methods:{
        close(){
            this.$emit('closeDrawer')
        }
    }
}
</script>
<style>
.bpm-process-no .process-no-header{
    box-shadow: none !important;
}
.bpm-process-no .process-no-header .busi_button{
    padding: 0 !important;
}
</style>
<style scoped>
.outContainer{
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.titleBox{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    height: 56px;
    border-bottom: 1px solid #E7E7E7;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.04);
}
.titleLeft{
    display: flex;
    align-items: center;
}
.title{
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0px;
    margin-right: 15px;
    color: rgba(17, 19, 56, 0.85);
}
.status{
    line-height: 22px;
    padding: 0 16px;
    font-size: 12px;
    color: #FFFFFF;
    border-radius: 3px;
}
.status1{
    background: linear-gradient(111deg, #3E74F5 3%, #42A1EE 115%);
}
.titleRight{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    cursor: pointer;
    height: 20px;
}
.el-icon-close{
    font-size: 16px;
    font-weight: 700;
    display: block;
    color: rgba(0, 0, 0, 0.6);
}
.contentBox{
    padding: 20px 0;
    overflow: auto;
    flex: 1;
}
.tagsBox{
    display: flex;
    padding-left: 24px;
}
.tag{
    border-radius: 2px;
    background: #F6FFED;
    padding: 0 8px;
    box-sizing: border-box;
    line-height: 22px;
    font-size: 12px;
    text-align: center;
    margin-right: 8px;
}
.tagType1{
    color: #52C41A;
    border: 1px solid #B7EB8F;
    background: #F6FFED;
}
.tagType2{
    color: #1890FF;
    border: 1px solid #91D5FF;
    background: #E6F7FF;
}
.stepBoxOut{
    /* padding-right: 24px; */
    padding: 0 24px;
}
.stepBox{
    display: flex;
    align-items: center;
    height: 38px;
    border-radius: 4px;
    border: 1px solid rgba(62, 116, 245, 0.12);
    margin-top: 32px;
    padding: 0 16px;
    justify-content: space-between;
}
.stepBoxLeft{
    display: flex;
    align-items: center;
}
.stepIconBox{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #3E74F5;
    margin-right: 6px;
}
.stepIconBox span{
    margin-bottom: 3px;
}
.stepIn{
    display: flex;
    align-items: center;
}
.stepLine{
    height: 1px;
    margin: 0 6px;
    width: 28px;
    background: #3E74F5;
}
.stepName{
    font-size: 12px;
    color: #3E74F5;
}
.isDark .stepIconBox{
    color: #818181;
}
.isDark .stepLine{
    background: #818181;
}
.isDark .stepName{
    color: #818181;
}
.circle{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0.4px solid #3E74F5;
}
.el-icon-check{
    font-size: 8px;
}
.stepBoxRight{
    font-size: 12px;
    color: #3E74F5;
    cursor: pointer;
}
.listOut{
    padding-left: 24px;
}
.listTitleBox{
    margin-top: 24px;
    height: 32px;
    border-radius: 4px 0 0 4px;
    background: #F4F6F9;
    display: flex;
    align-items: center;
    padding-left: 9px;
}
.listIcon{
    width: 14px;
    user-select: none;
}
.listTitle{
    font-size: 12px;
    color: #6C7389;
    margin-left: 9px;
}
.listContentOut{
    margin-top: 20px;
}
.listContent{
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    height: 17px;
}
.listLabel{
    font-size: 12px;
    color: #9898AE;
}
.listContentDes{
    font-size: 12px;
    color: rgba(0, 0, 0, 0.85);
}
.isLink{
    color: #4C78FF;
}
.footerBox{
    height: 56px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    border-top:1px solid #E7E7E7;
}
.footerBtn{
    line-height: 32px;
    background: #4C78FF;
    border-radius: 3px;
    margin-right: 8px;
    text-align: center;
    font-size: 14px;
    color: white;
    padding: 0 16px;
    cursor: pointer;
}
.btn2{
    background: #E7E7E7;
    color: #171717;
}
</style>
